<template>
	<div id="updateUserDetails" class="updateUserDetails">
		<group label-width="4.5em" label-margin-right="2em" label-align="right">
			<x-switch class="customerSwitch" title="激活" :value-map="[0, 1]" v-model="status" label-align="left"></x-switch>
			<x-input ref="phoneRef" title="手机" mask="99999999999" :max="11" is-type="china-mobile" v-model="user_name"></x-input>
			<x-input title="密码" type="password" v-model="user_password"></x-input>
			<x-input title="昵称" v-model="nickname"></x-input>
			<cell class="rolePickList" title="角色" :value="roleList" @click.native="onClickRole" is-link></cell>
		</group>
		<div v-transfer-dom>
			<popup v-model="show" class="popupList">
				<div class="box">
					<div class="boxTitle">
						已选: {{roleList}}
					</div>
					<!--这里SelectedOnes默认对是Key/Value的Object，在与Server交互时注意统一 -->
					<checker v-model="selectedOnes" type="checkbox" default-item-class="role-item" selected-item-class="role-item-selected">
						<checker-item v-for="object in objectList" :value="object" :key="object.id">{{object.role_description}}</checker-item>
					</checker>
				</div>
				<flexbox>
					<flexbox-item>
						<x-button class="flexBtn_confirm" @click.native="hide">确定</x-button>
					</flexbox-item>
					<flexbox-item>
						<x-button class="flexBtn_cancel" @click.native="hide">取消</x-button>
					</flexbox-item>
				</flexbox>
			</popup>
		</div>
		<flexbox>
			<flexbox-item>
				<x-button class="flexBtn_confirm" @click.native="updateUser">确定</x-button>
			</flexbox-item>
			<flexbox-item>
				<x-button class="flexBtn_cancel" @click.native="cancel">取消</x-button>
			</flexbox-item>
		</flexbox>
	</div>
</template>

<script>
	import bus from '@/event/eventBus'
	import NetWorking from '../../../utils/networking'
	import {Group, XInput, XButton, Flexbox, FlexboxItem, Cell, Popup, Checker, TransferDom, CheckerItem, XSwitch} from 'vux'

	export default {
		name: "new-user",
		components: {
			Cell,
			Group,
			XInput,
			XButton,
			Flexbox,
			FlexboxItem,
			Popup,
			Checker,
			TransferDom,
			CheckerItem,
			XSwitch
		},
		directives: {
			TransferDom
		},
		data() {
			return {
				id: this.$route.params.id,
				user_name: '',
				user_password: '',
				phone: '',
				nickname: '',
				roleList: '',
				roleIdList: '',
				role_id: '',
				show: false,
				objectList: [],
				objectListValue: [],
				roleListTitle: '角色列表',
				fullValues: [],
				selectedOnes: [],
				status: 0
			}
		},
		watch: {
			selectedOnes: function () {
				//Clear old data
				this.roleList = ''
				let i
				for(i in this.selectedOnes){
					this.roleList = this.roleList + this.selectedOnes[i].role_description + ','
				}
				this.roleList = this.roleList.substring(0,this.roleList.length - 1)
			}
		},
		created: function () {
			bus.$emit("barController", 1)
			bus.$emit("setTopSimpleTitle", '用户编辑')

			let _this = this
			NetWorking.doGet(
				'users/getUserModel',
				null,
				{
					params: {
						id: this.id
					}
				}
			).then(
				response => {
					let rs = response.data
					if(rs.error_code == 0){
						_this.user_name = rs.user_model.sysUser.username
						_this.user_password = rs.user_model.sysUser.password
						_this.phone = rs.user_model.sysUser.phone
						_this.nickname = rs.user_model.sysUser.nickname
						_this.status = rs.user_model.sysUser.status

						for(let i=0; i<rs.user_model.sysRoleList.length; i++){
							this.selectedOnes.push(rs.user_model.sysRoleList[i])
						}
					}
				}
			)
		},
		methods: {
			onClickRole: function () {
				let _this = this
				NetWorking.doGet(
					'roles',
					null,
					null,
					null
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							_this.objectList = rs.role_list
						}else{
							alert(rs.error_message)
						}
					}
				)
				this.show = true
			},
			onItemClick (value) {
				this.role_id = value
				if (!this.disabled) {
					this.showPopup = false
				}
			},
			hide: function () {
				this.show = false
			},
			change (val, label) {
				console.log('change', val, label)
			},
			cancel: function () {
				this.$router.go(-1)
			},
			updateUser: function () {

				if(this.user_name == '' || this.password == '' || this.nickname == '' || this.selectedOnes == ''){
					this.error = "请输入所有必填项"
					return
				}

				if(this.$refs.phoneRef.firstError != null && this.$refs.phoneRef.firstError != ''){
					this.error = this.$refs.phoneRef.firstError
					return
				}

				NetWorking.doPatch(
					'users/updateUserModel',
					null,
					{
						id: this.id,
						username: this.user_name,
						password: this.user_password,
						phone: this.user_name,
						nickname: this.nickname,
						status: this.status
					},
					{
						headers: {
							'Content-Type': 'application/json;charset=utf-8',
							'data': 'JSON.stringify(json)'
						},
						params: {
							"roleList": JSON.stringify(this.selectedOnes)
						}
					}
				).then(
					response => {
						let rs = response.data
						if(rs.error_code == 0){
							this.$router.go(-1)
						}else{
							alert(rs.error_message)
						}
					}
				)
			}
		}
	}
</script>

<style>
	.boxTitle{
		margin-bottom: 20px;
		padding: 5px 15px;
	}

	.popupList {
		height: 100% !important;
		background: white;
	}

	.box {
		padding: 0 15px;
		margin-top: 66px;
	}
	.role-item {
		border: 1px solid #ececec;
		padding: 5px 15px;
		width: 30%;
		margin: 10px 10px 10px 10px;
	}
	.role-item-selected {
		border: 1px solid green;
	}

	.updateUserDetails {
		border: solid;
		border-color: #f7f7fa;
		margin-left: 5px;
		margin-right: 5px;
		margin-top: 56px;
		box-shadow: 5px 5px 5px #888888;
		border-radius: 25px;
		margin-bottom: 100px;
		background-color: white;
	}

	.buttonUser {
		width: 100%;
		margin-top: 15px;
		border-radius: 25px;
	}

	.rolePickList {
		padding: 0px 15px !important;
	}

	.button-group {
		border-radius: 25px;
	}

	.popupRolelist {
		margin-top: 56px;
		width:100%;
		height:100%;
	}

	.buttonUser {
		margin-top: 20px;
		margin-bottom: 20px;
		width: 90% !important;

	}
</style>